/*
 * @Author: kanglang
 * @Date: 2020-12-09 14:25:51
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 10:13:36
 * @Description: 用户反馈--按住说话
 */
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { px2dp } from '@/styles';
import { iconMikeCoffee,
  iconMikeGray, } from '@/images';

const PressTalk = ({ speaking, voiceTime, startSpeaking, stopSpeaking, onPress }) => {
  return (
    <View style={styles.speakBox}>
      {
        speaking ?
          <View style={styles.gifBox}>
            <Image
              style={styles.voiceGif}
              resizeMode='contain'
              source={require('@/images/gif/voice_left.gif')}
            />
            <Text style={styles.seconds}>
              {voiceTime}
              ''
            </Text>
            <Image
              style={styles.voiceGif}
              resizeMode='contain'
              source={require('@/images/gif/voice_right.gif')}
            />
          </View>
          :
          <Text style={styles.pressSpeakTip}>按住说话</Text>
      }
      <TouchableOpacity
        style={styles.speakBtn}
        onPressIn={startSpeaking}
        onPressOut={stopSpeaking}
        opacity={0.8}
      >
        <Image
          style={styles.speaking}
          resizeMode='contain'
          source={speaking ?
            iconMikeGray :
            iconMikeCoffee}
        />
      </TouchableOpacity>
      <Text style={styles.speakTips}>
        {speaking ? '单段语音最长 60 秒' : '“按住说话”可录制您的语音意见或建议'}
      </Text>
    </View>
  );
};
export default PressTalk;

const styles = StyleSheet.create({
  speakBox: {
    alignItems: 'center',
    paddingVertical: px2dp(40)
  },
  pressSpeakTip: {
    color: '#686764',
    fontSize: px2dp(32)
  },
  speakBtn: {
    width: px2dp(172),
    height: px2dp(172),
    marginTop: px2dp(18),
    marginBottom: px2dp(10)
  },
  speaking: {
    width: px2dp(172),
    height: px2dp(172)
  },
  speakTips: {
    color: '#CDCCC9',
    fontSize: px2dp(28)
  },
  gifBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  voiceGif: {
    width: px2dp(112),
    height: px2dp(28)
  },
  seconds: {
    color: '#686764',
    fontSize: px2dp(40),
    paddingLeft: px2dp(32),
    paddingRight: px2dp(20)
  },
});
